
<!DOCTYPE html>
<html>
    <head>
        <title>avalon.css</title>
        <script src="avalon.js" type="text/javascript"></script>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html{
                background:#4d6366;
            }
            body{
                padding:20px;
                background:#f2f2f2;
            }
            #aaa{
                position: absolute;
                width:800px;
                height: 500px;
                background:#2AAA24;
                left:4em;
                top:40px;
            }
            #bbb{
                position: absolute;
                width:300px;
                height:50px;
                background: red;
                left:30px;
                top:20%;
            }
        </style>
        <script>
            avalon.ready(function() {
                var aaa = document.getElementById("aaa")
                avalon.log(avalon(aaa).position())
                var bbb = document.getElementById("bbb")
                avalon.log(avalon(bbb).position())
            })
        </script>
    </head>
    <body>
        <div id="aaa">
            <div id="bbb">

            </div>
        </div>
    </body>
</html>
